/**
 * BabyTap TV App
 * Main entry point
 */

import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { MainScreen } from './src/screens/MainScreen';
import CardDetailScreen from './src/screens/CardDetailScreen';
import { Card, ServerInfo } from './src/types/Card';

export type RootStackParamList = {
  Main: {
    discoveredHost?: string;
    discoveredPort?: number;
    discoveredDeviceName?: string;
    discoveredUrl?: string;
    discoveredIsHttps?: boolean;
  };
  CardDetail: {
    card: Card;
    isLocal?: boolean;
    serverInfo?: ServerInfo;
    cardList?: Card[];
    currentIndex?: number;
    showCardImages?: boolean;
  };
};

const Stack = createStackNavigator<RootStackParamList>();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <StatusBar barStyle="light-content" backgroundColor="#1a1a1a" />
      <Stack.Navigator
        initialRouteName="Main"
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: '#1a1a1a' },
        }}
      >
        <Stack.Screen 
          name="Main" 
          component={MainScreen}
        />
        <Stack.Screen 
          name="CardDetail" 
          component={CardDetailScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
